articles

Home / DeveloperSection / Articles / Drag and Drop elements using jQuery

Drag and Drop elements using jQuery

Vijay Shukla 5528 17-Dec-2012

In this article I’m going to explain how to create a drag and drop element using jQuery.

Through this coding we can drag any item which is under the list and drop any other place.

<!doctype html>

 <html>
<head>
    <title>::mindstick Sorting in jQuery::</title>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <style>
    #sort
           {
                list-style-type: none;
                margin: 100;
                padding: 10;
                width: 100%;
           }
    #sort li
             {
                margin: 2px 2px 2px 2px;
                padding: 0.5em;
                padding-left: 2em;
                font-size: 2em;
                height: 18px;
              }
    </style>
    <script>
    $(function() {
        $( "#sort" ).sortable();
        $( "#sort" ).disableSelection();
    });
    </script>
</head>
<body>
   <ul id="sort">
                <li>ADO.NET</li>
                <li>ASP.NET</li>
                <li>PHP</li>
                <li>Java</li>
                <li>jQuery</li>
   </ul>
</body>
</html>
Sortable ()

Sortable method in jQuery Enable a group of DOM elements to be Sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit.

disableSelection ()

disableSelection method is use to in jQuery script for make an unselect able text in your application.

After that coding we can get below output on your browser:

 

Drag and Drop elements using jQuery


Updated 07-Sep-2019

Leave Comment

Comments

Liked By